<template>

    <div class="breadcrumb-bar">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <div class="breadcrumb-list">
                        <nav aria-label="breadcrumb" class="page-breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <nuxt-link to="/teacher">首页</nuxt-link>
                                </li>

                                <li class="breadcrumb-item" aria-current="page">
                                    <nuxt-link to="/teacher/class">我的班级</nuxt-link>

                                </li>
                                <li class="breadcrumb-item" aria-current="page">Scratch编程启蒙</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="settings-widget">
        <div class="settings-inner-blk p-0">
            <div class="comman-space pb-0">
                <div class="filter-grp ticket-grp d-flex align-items-center justify-content-between">
                    <div>
                        <h3>刘奕凡的编程课</h3>
                        <div class="rating-img d-flex align-items-center" style="padding: 10px 0px">
                            <img src="assets/img/icon/icon-01.svg" alt="">
                            <p>12个课程</p>

                            <img src="assets/img/icon/icon-02.svg" alt="">
                            <p>9名学生</p>
                        </div>
                    </div>
                    <div class="ticket-btn-grp">
                        <a v-show="curTab == 'student'" href="#" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addstudent">添加学生</a>
                        <a v-show="curTab == 'course'" href="#" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addcourse">添加课程</a>
                        <a v-show="curTab == 'exam'" href="#" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addexam">安排考试</a>

                    </div>
                </div>

                <div class="category-tab tickets-tab-blk">
                    <ul class="nav nav-justified">
                        <li v-for="item in tabs" :key="item.id" class="nav-item" @click="curTab = item.id">
                            <a href="javaScript:void(0);" class="nav-link" :class="{ 'active': curTab == item.id }">{{
                                item.name }}</a>
                        </li>
                    </ul>
                </div>

                <div class="settings-inner-blk p-1" v-show="curTab == 'course'">
                    <div class="row">
                        <div v-for="i in 10" :key="i" class="col-lg-3 col-md-4 d-flex">
                            <div class="course-box course-design d-flex ">
                                <div class="product">
                                    <div class="product-img">
                                        <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                                    </div>
                                    <div class="product-content">
                                        <h3 class="title">蓝桥集训班</h3>
                                        <div class="d-flex align-items-center">
                                            <div class="rating-img d-flex align-items-center">
                                                <img src="assets/img/icon/icon-01.svg" alt="">
                                                <span>12个课时</span>
                                            </div>
                                            <div class="course-view d-flex align-items-center">
                                                <div class="all-btn all-category d-flex align-items-center">
                                                    <nuxt-link to="/teacher/class-course-detail?id=1"
                                                        class="btn btn-primary">
                                                        进入课程
                                                    </nuxt-link>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="settings-inner-blk p-1" v-show="curTab == 'student'">
                    <div>
                        <div class="settings-referral-blk table-responsive">
                            <table class="table table-nowrap mb-4">
                                <thead>
                                    <tr>
                                        <th>学生姓名</th>
                                        <th>学生ID</th>
                                        <th>手机号</th>
                                        <th>登录密码</th>
                                        <th>性别</th>
                                        <th>年龄</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-if="student.curList.length == 0">
                                        <td colspan="7">
                                            没有学生
                                        </td>
                                    </tr>
                                    <tr v-for="item in student.curList" :key="item.id">
                                        <td>
                                            <nuxt-link class="refer-avatar-blk d-flex align-items-center"
                                                to="/teacher/student-detail?id=1">
                                                <img src="assets/img/students/refer-img1.png"
                                                    class="rounded-circle me-2" alt="Referred User Info">
                                                <span>Guy Hawkins</span>
                                            </nuxt-link>
                                        </td>
                                        <td>{{ item.name }}</td>
                                        <td>{{ item.telephone }}</td>
                                        <td>123456</td>
                                        <td>男</td>
                                        <td>10</td>
                                        <td class="text-center">
                                            <span>重置密码</span> &nbsp;
                                            <span>换班</span>&nbsp;
                                            <span>删除</span>&nbsp;
                                        </td>

                                    </tr>

                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>

                <div class="settings-inner-blk p-1" v-show="curTab == 'process'">

                    <div class="d-flex mb-3">
                        <a v-for="i in 6" :key="i" href="javascript:;" class="btn btn-reply m-1"
                            :class="{ cur: i == 3 }"><i class="feather-award"></i> 课程{{ i }}</a>
                    </div>

                    <div class="row">
                        <div class="col-sm-6">
                            <h5 class="subs-title">课程3 <span>5个教学单元</span></h5>
                            <h6></h6>
                        </div>
                        <div class="col-sm-6 text-sm-end">
                            <h6>5个教学单元</h6>
                        </div>
                    </div>
                    <div class="course-card mb-3" style="overflow: auto;">
                        <table class="table table-nowrap">
                            <thead>
                                <tr>
                                    <th>学生</th>
                                    <th v-for="i in 7" :key="i">第{{ i }}单元</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="j in 7" :key="j">
                                    <td>小花</td>
                                    <td v-for="i in 7" :key="i">
                                        <div class="d-flex">
                                            <div class="status s-nostart">1</div>
                                            <div class="status s-doing" title="正在做">实战1</div>
                                            <div class="status s-done"><i class="feather-award"></i>作业</div>
                                            <div class="status s-commited" title="正在做">实战</div>
                                        </div>
                                    </td>

                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <AppStatus />
                </div>

                <div class="settings-inner-blk p-1" v-show="curTab == 'setting'">
                    <div class="mb-3">
                        <form action="#">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label class="form-control-label">班级名称</label>
                                        <input v-model="formData.title" type="text" class="form-control"
                                            placeholder="请输入班级名称">
                                    </div>
                                    <app-class-level v-model="formData.level" />
                                    <div class="form-group">
                                        <label class="form-control-label">教学科目</label>

                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio" checked>
                                                <span class="checkmark"></span> Scratch
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> Python
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> C++
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">班级类型</label>
                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio" checked>
                                                <span class="checkmark"></span> 常规
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> 集训
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradio">
                                                <span class="checkmark"></span> 试听
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">班级状态</label>

                                        <div>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradiostate" :value="true"
                                                    v-model="formData.state">
                                                <span class="checkmark"></span> 开课中
                                            </label>
                                            <label class="radio-inline custom_radio me-4">
                                                <input type="radio" name="optradiostate" :value="false"
                                                    v-model="formData.state">
                                                <span class="checkmark"></span> 已毕业
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label">邀请码</label>
                                        <input type="text" class="form-control" placeholder="请输入邀请码">
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">自动限开次数(0表示不限制)</label>
                                        <input type="text" class="form-control" placeholder="请输入自动限开次数">
                                    </div>

                                    <div class="update-profile">
                                        <button @click="save" type="button" class="btn btn-primary">保存修改</button>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

                <div class="settings-inner-blk p-1" v-show="curTab == 'exam'">
                    <div class="row">
                        <div v-for="i in 3" :key="i" class="col-lg-3 col-md-4 d-flex">
                            <div class="course-box course-design d-flex ">
                                <div class="product">
                                    <div class="product-img">
                                        <img class="img-fluid" alt="" src="assets/img/course/course-09.jpg">

                                    </div>
                                    <div class="product-content">

                                        <h3 class="title">蓝桥杯15届3月真题考试</h3>
                                        <div class="d-flex align-items-center">
                                            <div class="rating-img d-flex align-items-center">
                                                <img src="assets/img/icon/icon-01.svg" alt="">
                                                <span>100%参加</span>
                                            </div>
                                            <div class="course-view d-flex align-items-center">
                                                <div class="all-btn all-category d-flex align-items-center">
                                                    <nuxt-link to="/teacher/exam-detail?id=1" class="btn btn-primary">
                                                        查看详情
                                                    </nuxt-link>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4 d-flex">
                            <div class="course-box course-design d-flex ">
                                <div class="product">
                                    <div class="product-img">
                                        <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">

                                    </div>
                                    <div class="product-content">

                                        <h3 class="title">蓝桥杯15届3月真题考试</h3>
                                        <div class="d-flex align-items-center">
                                            <div class="rating-img d-flex align-items-center">
                                                <img src="assets/img/icon/icon-01.svg" alt="">
                                                <span>3人考完</span>
                                            </div>
                                            <div class="course-view d-flex align-items-center">
                                                <div class="all-btn all-category d-flex align-items-center">
                                                    正在进行
                                                    <!-- <nuxt-link to="/teacher/paper-detail?id=1"
                                                        class="btn btn-primary">
                                                        查看详情
                                                    </nuxt-link> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal-styles modal fade" id="addcourse" tabindex="-1" aria-labelledby="addpaymentMethod"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加课程</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-regular fa-circle-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <form class="search-form">
                        <div class="input-group">
                            <input type="text" placeholder="请输入课程名称" class="form-control">
                            <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
                        </div>
                    </form>
                    <table class="table table-nowrap mb-0">
                        <thead>
                            <tr>
                                <th>课程名称</th>
                                <th>介绍</th>
                                <th>建议年龄</th>
                                <th class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    课程1
                                </td>
                                <td>课程1的介绍</td>
                                <td>3-4</td>
                                <td class="text-center">
                                    <span>添加</span> &nbsp;
                                    <span>已存在</span>&nbsp;
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer me-auto">
                    <button type="button" class="btn btn-modal-style btn-cancel" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal-styles modal fade" id="addstudent" tabindex="-1" aria-labelledby="addpaymentMethod"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加学生</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-regular fa-circle-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <form class="search-form">
                        <div class="input-group">
                            <input v-model="student.stuName" type="text" placeholder="请输入学生姓名" class="form-control">
                            <button type="button" class="btn btn-primary" @click="findStudent"><i
                                    class="fa fa-search"></i></button>
                        </div>
                    </form>
                    <table class="table table-nowrap mb-0">
                        <thead>
                            <tr>
                                <th>
                                    <div class="form-check instruct-check-list">
                                        <input class="form-check-input" type="checkbox" name="option1">
                                    </div>
                                </th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, idx) in student.list" :key="item.id">
                                <td>
                                    <div class="form-check instruct-check-list">
                                        <input class="form-check-input" type="checkbox" v-model="student.selected[idx]">
                                    </div>
                                </td>
                                <td><a href="view-invoice.html">{{ item.name }}</a></td>
                                <td>男</td>
                                <td>5</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer me-auto">
                    <button type="button" class="btn btn-modal-style btn-submit" @click="addStuToClass">添加</button>
                    <button type="button" class="btn btn-modal-style btn-cancel" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal-styles modal fade" id="addexam" tabindex="-1" aria-labelledby="addpaymentMethod"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加考试</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="fa-regular fa-circle-xmark"></i></button>
                </div>
                <div class="modal-body">
                    <div class="col-lg-6">

                        <div class="form-group">
                            <label class="form-control-label">考试名称</label>
                            <input type="text" class="form-control" placeholder="考试考试名称">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">考试说明</label>
                            <textarea rows="5" class="form-control" placeholder="考试说明"></textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">考试截止时间</label>
                            <input type="text" class="form-control" placeholder="考试截止时间">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">选择试卷</label>
                            <form class="search-form">
                                <div class="input-group">
                                    <input type="text" placeholder="请输入试卷名称" class="form-control">
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
                                </div>
                            </form>
                            <table class="table table-nowrap mb-0">
                                <thead>
                                    <tr>
                                        <th>课程名称</th>
                                        <th>试卷名称</th>
                                        <th>建议年龄</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            课程1
                                        </td>
                                        <td>课程1的介绍</td>
                                        <td>3-4</td>
                                        <td class="text-center">
                                            <span>选中</span>
                                            <span>重考</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>


                </div>
                <div class="modal-footer me-auto">
                    <button type="button" class="btn btn-modal-style btn-submit" data-bs-dismiss="modal">添加</button>
                    <button type="button" class="btn btn-modal-style btn-cancel" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

</template>
<script setup>
const tabs = ref([
    {
        id: "course",
        name: '课程'
    },
    {
        id: "student",
        name: '学生'
    },
    {
        id: "process",
        name: '进度'
    },
    {
        id: "exam",
        name: '考试'
    },
    {
        id: "setting",
        name: '设置'
    }
])
const curTab = ref('course')
const route = useRoute()
const router = useRouter()

const formData = reactive({
    title: '测试',
    level: 'la',
    type: 'training',
    subject: 'scratch',
    learnMethod: 'online',
    tenantID: '',
    tearcherID: '',
    state: true
})

const classInfo = reactive({
    id: ''
})
const student = reactive({
    stuName: '张',
    curList: [], // 属于本班的学生
    list: [],
    selected: []
})

const addStuToClass = async () => {
    // debugger
    const ids = [];
    student.selected.forEach((item, idx) => {
        if (item) {
            ids.push(student.list[idx].id)
        }
    })
    ids.forEach(async (id) => {
        const data = await studentApi.put(id, { classID: Number(classInfo.id) })
    })

    $('#addstudent').modal('hide')
    search()
}
const findStudent = async () => {
    const data = await studentApi.getList({ keyword: student.stuName })
    student.list = data.list
    student.selected = data.list.map(item => false)
}

const save = async () => {
    await classApi.put(route.query.id, formData)
    toast('修改班级信息成功')
}

const search = async () => {
    const id = route.query.id
    if (!id) {
        toast('参数错误,请选择具体的班级')
        router.push('/teacher/class')
        return;
    }
    classInfo.id = id
    const data = await classApi.getDetail(id)
    formData.title = data.title
    formData.level = data.level
    formData.type = data.type
    formData.subject = data.subject
    formData.learnMethod = data.learnMethod
    formData.tenantID = data.tenantID
    formData.tearcherID = data.tearcherID
    formData.state = data.state

    // 本班的学生
    const res = await studentApi.getList({ classID: classInfo.id })
    student.curList = res.list

}
onMounted(async () => {
    await nextTick()
    search()

})

</script>

<style scoped>
.category-tab.tickets-tab-blk .nav-justified .nav-item {
    flex-basis: 80px;
}

.search-form {
    width: 400px;
}

.cur {

    background: #392C7D;
    color: #FFF;
}

table td {
    font-size: small;
}
</style>